<div class="layuimini-container layuimini-page-anim">
	<div class="layuimini-main">

		<fieldset class="table-search-fieldset">
			<legend>搜索信息</legend>
			<div style="margin: 10px 10px 10px 10px">
				<a href="http://localhost:8082/order/1">测试跨域</a>

				<!-- 条件搜索  start-->
				<form class="layui-form layui-form-pane" action="">
					<div class="layui-form-item">

						<div class="layui-inline">
							<div class="layui-input-inline">
								<input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
									class="layui-input">
							</div>
						</div>

						<div class="layui-inline">
							<div class="layui-input-inline">
								<select name="sex" lay-filter="sex">
									<option value="" selected>请选择性别</option>
									<option value="0">女</option>
									<option value="1">男</option>
								</select>
							</div>
						</div>


						<div class="layui-inline">
							<div class="layui-input-inline" style="width: 120px;">
								<select name="state" lay-filter="state">
									<option value="" selected>请选择状态</option>
									<option value="0">禁用</option>
									<option value="1">启用</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input type="text" name="regTime" id="regTime" placeholder="请选择注册时间"
									class="layui-input">
							</div>
						</div>
						<div class="layui-inline">

							<div class="layui-form-item" id="area-picker">
								<div class="layui-input-inline" style="width: 150px;">
									<select name="province" class="province-selector" data-value=""
										lay-filter="province-1">
										<option value="">请选择省</option>
									</select>
								</div>
								<div class="layui-input-inline" style="width: 150px;">
									<select name="city" class="city-selector" data-value="" lay-filter="city-1">
										<option value="">请选择市</option>
									</select>
								</div>
								<div class="layui-input-inline" style="width: 150px;">
									<select name="county" class="county-selector" data-value="" lay-filter="county-1">
										<option value="">请选择区</option>
									</select>
								</div>
								<div class="layui-input-inline" style="width: 300px;">
									<input type="text" name="address" placeholder="请输入详细地址" autocomplete="off"
										class="layui-input">
								</div>
							</div>
						</div>
						<div class="layui-inline">
							<button type="submit" id="search" class="layui-btn layui-btn-primary" lay-submit
								lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
						</div>
					</div>
				</form>
				<!-- 条件搜索  end-->

			</div>
		</fieldset>

		<!-- 定义 id="toolbarDemo"  -->
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
				<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="batchDelete"> 批量删除 </button>
			</div>
		</script>

		<!-- 定义 id="currentTableBar" -->
		<script type="text/html" id="currentTableBar">
			<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
		</script>

		<!-- 表格：数据表格 -->
		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

	</div>
</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate;


		//日期
		laydate.render({
			elem: '#regTime'
		});

		//省市区
		layarea.render({
			elem: '#area-picker',
			//三级选择框每次选择时执行
			change: function(res) {
				//选择结果
				console.log(res);
			}
		});

		//对table进行初始化
		table.render({
			elem: '#currentTableId', //指定初始化的tableID
			url: 'http://localhost:8080/user/find', //请求地址,获取数据，后期将调用controller的接口，获得json数据
			toolbar: '#toolbarDemo', //引用上面定义的工具栏按钮
			defaultToolbar: ['filter', 'exports', 'print'],
			cols: [
				[ //字段，表头
					{
						type: "checkbox",
						width: 50
					},
					{
						field: 'id',
						width: 80,
						title: 'ID',
						sort: true
					},
					{
						field: 'username',
						title: '用户名',
						width: 100,
					},
					{
						field: 'sex',
						width: 50,
						title: '性别',
						sort: true,
						templet: function(d) {
							if (d.sex == 1) {
								return '男'
							} else {
								return '女'
							}
						},
					},
					{
						field: 'address',
						title: '地址'
					},
					{
						field: 'integral',
						width: 80,
						title: '积分',
						sort: true
					}, //sort: true表示该字段的数据可以进行排序操作
					{
						field: 'classify',
						width: 80,
						title: '职业'
					},
					{
						field: 'regTime',
						title: '注册时间'
					},
					{
						title: '操作',
						minWidth: 150,
						toolbar: '#currentTableBar',
						align: "center"
					} //toolbar: '#currentTableBar'表示调用上面定义的编辑和删除按钮
				]
			],
			page: true, //是否显示分页插件
			limits: [10, 20, 30, 40, 50], //定义每页显示多少条记录
			limit: 10, //默认每页 显示15条
			skin: 'line'
		});


		


		// 监听搜索操作
		form.on('submit(data-search-btn)', function(data) { //当点击搜索按钮时，执行function()函数，data是指form表单中的所有数据
			console.log(data);
			var result = JSON.stringify(data.field); //将搜索的数据转换成JSON字符串
			layer.alert(result, { //弹出层，显示result（转换后的json字符串）
				title: '最终的搜索信息' //弹出层的标题
			});

			//执行搜索重载
			table.reload('currentTableId', {
				page: { curr: 1 },//当前行是第一行
				where: { searchParams: result }//搜索条件
			}, 'data');

			return false;
		});

		/**
		 * toolbar事件监听
		 */
		table.on('toolbar(currentTableFilter)', function(obj) {
			if (obj.event === 'add') { // 监听添加操作
				var content = miniPage.getHrefContent('page/table/add.html'); //加载页面
				var openWH = miniPage.getOpenWidthHeight();

				//定义弹出层
				var index = layer.open({
					title: '添加用户',
					type: 1,
					shade: 0.2,
					maxmin: true, //弹出层，最小化和最大化的按钮
					shadeClose: true, //关闭
					area: [openWH[0]-50 + 'px', openWH[1]-50 + 'px'],
					offset: [openWH[2] + 'px', openWH[3] + 'px'],
					content: content, //弹出层的内容
				});

				$(window).on("resize", function() {
					layer.full(index); //对弹出层实现全屏效果
				});

				//TODO:当添加成功后，关闭弹出层，刷新table表格



			} else if (obj.event === 'batchDelete') { // 监听批量删除操作
				var checkStatus = table.checkStatus('currentTableId'), //获得table中的所有勾选的记录
					data = checkStatus.data; //获得table中所有勾选记录的数据
					console.log(data);
					
					//1.选判断是否有勾选项
					var selectCount = data.length;
					if(selectCount == 0){
						layer.msg('批量删除至少选中一项数据', function() {});
						return false;
					}
					//2.询问是否要删除
					layer.confirm('真的要删除选中的项吗？', function(index) { 	
						
						layer.close(index);
						
						//确认删除
						//2.获得勾选项数据id，进行拼接成字符串
						//拼接勾选记录ID
						var isStr = "";
						for (var i = 0; i < selectCount; i++) {
							isStr = isStr + "," + data[i].id;
						}
						
						console.log(isStr);
						//3.ajax请求后端接口
						$.ajax({
							url : 'http://localhost:8080/user/batch',
							type : 'post',
							data : {"_method":"delete", "ids": isStr},
							success: function(result){
								console.log(result);
								//TODO:刷新table,重新加载
								table.reload('currentTableId');
							},
							error: function(result){
								console.log(result);
							}
						});
					});
			}
		});

		//监听表格复选框选择
		table.on('checkbox(currentTableFilter)', function(obj) {
			console.log(obj)
		});



		//初始化职业数据
		var classifyList = ['演员','作家','生活家','歌手'];
		
		
		

		//监 听操作列下面的编辑和删除
		table.on('tool(currentTableFilter)', function(obj) {
			//获得当前行数据
			var data = obj.data;

			if (obj.event === 'edit') { //编辑事件
				var content = miniPage.getHrefContent('page/table/edit.html');
				var openWH = miniPage.getOpenWidthHeight();

				//弹出层
				var index = layer.open({
					title: '编辑用户',
					type: 1,
					shade: 0.2,
					maxmin: true,
					shadeClose: true,
					area: [openWH[0]-50 + 'px', openWH[1]-50 + 'px'],
					offset: [openWH[2] + 'px', openWH[3] + 'px'],
					content: content,  //弹出层内容
					success: function(layero, index){	// 成功弹出后回调
						console.log(data);	//获得当前行的数据
						//获得子页面
						//var edit = layer.getChildFrame('#user_edit', index); //#user_edit是子页面中的id
						$(layero).find("input[name='id']").val(data.id);
						$(layero).find("input[name='username']").val(data.username);
						$(layero).find("input[name='password']").val(data.password);
					
						$(layero).find("input[name='integral']").val(data.integral);
						$(layero).find("input[name='score']").val(data.score);
						$(layero).find("input[name='wealth']").val(data.wealth);
						//文本域
						$(layero).find("textarea[name='sign']").text(data.sign);
						//性别
						$(layero).find("input[name='sex'][value='0']").attr("checked", data.sex == 0 ? true : false);
						$(layero).find("input[name='sex'][value='1']").attr("checked", data.sex == 1 ? true : false);
						
						
						//遍历职业
						let tpl = '<option value="">请选择</option>';
						classifyList.forEach(function(_item){
							// 判断需要对那个选项进行回显
							tpl += '<option value="'+ _item +'"';
							if (_item == data.classify) {
								tpl += ' selected ';
							}
							tpl += '>'+_item+'</option>';
						});
						$(layero).find("select[name='classify']").html(tpl);//绑定拼接html
						
						
						
						$(layero).find("#text1").text(data.content);
						
						
						form.render(); //更新全部
					
					
					},
					yes:function(index, layero){// 保存按钮回调函数
						
					}
				});

				$(window).on("resize", function() {
					layer.full(index);
				});

				return false;

			} else if (obj.event === 'delete') { //删除
				//弹出框
				layer.confirm('真的删除行么', function(index) {
					console.log(data.id);
					
					//TODO:请求后端接口进行删除操作
					$.ajax({
						url : 'http://localhost:8080/user/' + data.id,
						type : 'delete',
						//data : {"_method": "delete", "id": data.id}
						success: function(result){
							console.log(result);
							//关闭确认消息框
							layer.close(index);
							//TODO:刷新table,重新加载
							table.reload('currentTableId');
						},
						error: function(result){
							console.log(result);
						}
						
					});
					
				});
			}
		});

	});
</script>
